<template>
  <div>
    <div v-if="paperShow==='list'">
      <div class="exam-paper-container">
        <!-- 新增按钮 -->
        <el-row type="flex" justify="end" align="middle">
          <el-button type="primary" plain size="mini" @click="addRow">创建试卷</el-button>
        </el-row>
        <!-- 筛选区域 -->
        <el-form ref="form" :model="formData" label-width="80px" inline>
          <el-row>
            <el-col :span="6">
              <el-form-item label="试卷名称">
                <el-input v-model="formData.paper_name" size="small" placeholder="请输入试卷名称" span="6" />
              </el-form-item>
            </el-col>
            <el-col :span="6"> <el-form-item label="归属学科">
              <el-select v-model="formData.subject_id" size="small" placeholder="请选择学科">
                <el-option v-for="item in subjectList" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item> </el-col>
            <el-col :span="6"><el-form-item label="归属目录">
              <el-select v-model="formData.directory_id" size="small" placeholder="请选择目录">
                <el-option v-for="item in Directory" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item> </el-col>
            <el-col :span="6"> <el-form-item label="试卷状态">
              <el-select v-model="formData.show_state" size="small" placeholder="请选择试卷状态">
                <el-option value="1" label="启用" />
                <el-option value="2" label="禁用" />
              </el-select>
            </el-form-item> </el-col>
            <el-col :span="6"> <el-form-item label="试卷难度">
              <el-select v-model="formData.difficulty" size="small" placeholder="请选择难度">
                <el-option value="1" label="简单" />
                <el-option value="2" label="中等" />
                <el-option value="3" label="较难" />
              </el-select>
            </el-form-item> </el-col>
            <el-col :span="6"> <el-form-item label="试卷类型">
              <el-select v-model="formData.paper_type" size="small" placeholder="请选择试卷类型">
                <el-option value="1" label="模拟卷" />
                <el-option value="2" label="真题卷" />
              </el-select>
            </el-form-item></el-col>
            <el-col :span="6"><el-form-item label="创建时间">
              <el-date-picker
                v-model="timeList"
                value-format="timestamp"
                style="width:185px"
                size="small"
                type="daterange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"
                @change="setTime"
              />
            </el-form-item> </el-col>
            <el-col :span="6"> <el-form-item label="创建人">
              <el-input v-model="formData.create_name" placeholder="请选择创建人" size="small" />
            </el-form-item> </el-col>
            <el-col :span="3" :offset="21"> <el-form-item>
              <el-button
                type="primary"
                size="small"
                @click="onSubmit"
              >查询</el-button>
              <el-button size="small" @click="onReset">重置</el-button>
            </el-form-item></el-col>

          </el-row>
        </el-form>
        <!-- 表格区域 -->
        <el-table :data="list" border>
          <el-table-column prop="paper_name" label="试卷名称" width="280" align="left" />
          <el-table-column prop="subject_name" label="学科名称" align="center" width="150" />
          <el-table-column prop="directory_name" label="目录名称" align="center" />
          <el-table-column prop="paper_type" label="试卷类型" align="center">
            <template slot-scope="{row}">
              {{ paperType(row.paper_type) }}
            </template>
          </el-table-column>
          <el-table-column prop="show_state" label="试卷状态" align="center">
            <template slot-scope="{row}">
              <el-switch v-model="row.show_state" :active-value="1" :inactive-value="2" @change="updateStatus(row.id,row.show_state)" />
            </template>
          </el-table-column>
          <el-table-column prop="advpossize" label="分数情况" align="center">
            <template slot-scope="{row}">
              {{ row.pass_score+'/'+row.total_score }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="试卷难度" align="center">
            <template slot-scope="{row}">
              {{ difficulty(row.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column prop="create_name" label="创建人" align="center" />
          <el-table-column prop="created_at" label="创建时间" align="center">
            <template slot-scope="{row}">
              {{ time(row.created_at) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <i
                class="icon el-icon-view"
                @click="lookRow(row.id)"
              />
              <i
                class="icon el-icon-edit"
                @click="editRow(row.id)"
              />
              <i
                class="icon el-icon-delete"
                @click="delRow(row)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-row type="flex" justify="end" align="middle">
          <el-pagination
            :current-page.sync="formData.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="formData.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </el-row>
      </div>
    </div>
    <!-- <pager-info v-else-if="paperShow==='add'" :subject-list="subjectList" :info-list="Info" @PageShow="PageShow" /> -->
    <!-- <pager-look v-else-if="paperShow==='look'" ref="look" :info-list="Info" @PageShow="PageShow" /> -->
  </div>
</template>

<script>
import { getExamPaperList, getSubjectList, updateStatus, delPaper, lookRow } from '@/api/exam-paper'
// import PagerInfo from './components/info.vue'
// import PagerLook from './components/look.vue'
export default {
  name: 'PaperPage',
  // components: {
  //   PagerInfo, PagerLook
  // },
  data() {
    return {
      // 学科分类列表
      subjectList: [],
      timeList: [],
      // 筛选区域列表
      formData: {
        page: 1, // 当前页码
        limit: 10, // 页面条数
        subject_id: null, // 归属学科
        directory_id: null, // 归属目录
        paper_name: null, // 试卷名称
        difficulty: null, // 试卷难度
        show_state: null, // 试卷状态
        paper_type: null, // 试卷类型
        create_name: null, // 创建人
        create_time: null // 创建时间
      },
      list: [], // 表格信息
      Info: [],
      total: null,
      paperShow: 'list' // 新增查看删除修改部分显示
    }
  },
  computed: {
    // 归属目录列表
    Directory() {
      const res = this.subjectList.filter(item => {
        return item.id === this.formData.subject_id
      })
      if (!res[0]) return []
      return res[0].children
    }
  },
  created() {
    this.getPaperList()
    this.getSubjectList()
  },
  methods: {
    // 创建试卷
    addRow() {
      this.Info = []
      this.paperShow = 'add'
    },
    // 修改试卷
    async editRow(id) {
      const res = await lookRow(id)
      console.log(res)
      this.Info = res
      this.paperShow = 'add'
    },
    // 查看单个试卷详细信息
    async lookRow(id) {
      const res = await lookRow(id)
      console.log(res)
      this.Info = res
      // this.$nextTick(() => {
      //   this.$refs.look.formData = res
      // })
      this.paperShow = 'look'
    },
    // 题目类型
    QuestionType(row) {
      if (row === 1) return '单选题'
      if (row === 2) return '多选题'
      if (row === 3) return '判断题'
      if (row === 4) return '简答题'
    },
    // 修改启用状态
    async updateStatus(id, status) {
      console.log(id, status)
      await updateStatus(id, status)
      this.$message.success('修改成功')
      this.getPaperList()
    },
    // 删除
    async delRow(row) {
      // console.log(row)
      if (row.show_state === 1) {
        return this.$message.warning('禁用情况下才可以删除')
      }
      await this.$confirm('确认删除吗')
      await delPaper(row.id)
      this.$message.success('删除成功')
      if (this.formData.page > 1 && this.list.length === 1) {
        this.formData.page--
      }
      await this.getPaperList()
    },
    // 关闭新增修改
    PageShow(state) {
      this.paperShow = state
      this.Info = []
    },
    // 试卷类型
    paperType(row) {
      if (row === 1) return '模拟卷'
      if (row === 2) return '真题卷'
    },
    // 试卷难度
    difficulty(row) {
      if (row === 1) return '简单'
      if (row === 2) return '中等'
      if (row === 3) return '较难'
    },
    // 接收时间数组
    setTime() {
      if (this.timeList != null) {
        this.formData.create_time = this.timeList.join(',')
      }
    },
    // 时间戳转时间
    time(time) {
      return new Date(time).toLocaleDateString()
    },
    // 获取学科数据
    async getSubjectList() {
      const res = await getSubjectList()
      this.subjectList = res
    },
    // 获取基础数据
    async getPaperList() {
      const res = await getExamPaperList(this.formData)
      this.total = res.total
      this.list = res.list
    },
    // 筛选框提交事件
    async onSubmit() {
      this.create_time
      this.getPaperList()
    },
    // 筛选区域重置
    onReset() {
      this.formData = {
        page: 1, // 当前页码
        limit: 10, // 页面条数
        subject_id: null, // 归属学科
        directory_id: null, // 归属目录
        paper_name: null, // 试卷名称
        difficulty: null, // 试卷难度
        show_state: null, // 试卷状态
        paper_type: null, // 试卷类型
        create_name: null, // 创建人
        create_time: null // 创建时间
      }
      this.getPaperList()
    },
    // 每页数量变化的时候
    sizeChange(newSize) {
      // newSize 最新的每页数量
      this.formData.limit = newSize
      this.getPaperList()
    },
    // 页码变化事件
    currentChange(newPage) {
      // newPage 最新的页码
      this.formData.page = newPage
      this.getPaperList()
    }
  }
}
</script>

<style lang="scss" scoped>
.exam-paper-container{
  background-color: #fff;
  padding: 20px;

  .el-row{
padding-bottom: 10px;
  }
  .icon {
    font-size: 12px;
    padding:0 6px;
    color: #409eff;
  }
  .el-form-item {
  margin-right: 0 !important;
  margin-bottom: 10px;
}
.el-table{
  margin-bottom:20px;
}

}
</style>
